<template>
  <div>page1</div>
</template>

<script>
export default {
  data() {
    return {
      timerId: null
    }
  },
  mounted() {
    console.log('组件页面渲染完毕')
    // 1. 组件被切换会销毁，重新显示会叠加定时器，所以要清除
    this.timerId = setInterval(function () {
      console.log('开启了定时器')
    }, 2000)

    // 2. 访问当前的组件vc
    // 当组件匹配到的路由信息
    console.log(this.$route)
    // 当前整个路由的实例，又很多的函数方法
    console.log(this.$router)
  },
  beforeDestroy() {
    clearInterval(this.timerId)
    console.log('组件被销毁了')
  }
}
</script>

<style lang="less" scoped>
div {
  padding: 30px;
  min-height: 200px;
  background-color: skyblue;
}
</style>
